<template>
    <div class="record-page">
        <!-- 顶部筛选 -->


        <!-- 操作按钮区 -->
        <div class="action-bar">
            <el-button style="margin-left:10px;" @click="printTable">打印</el-button>
        </div>

        <!-- 患者信息 -->
        <div class="patient-info">
            姓名：{{ patientInfo.name }}　年龄：{{ patientInfo.age }}　性别：{{ patientInfo.sex }}　
            科室：{{ patientInfo.officeCode }}　床号：{{ patientInfo.bedCode }}　
            　住院号：{{ patientInfo.wardCode }} 诊断：{{ patientInfo.diagnosis }}
        </div>

        <!-- 护理记录表格 -->
        <el-table :data="records" border style="margin-top: 10px;" v-if="records.length > 0" stripe>
      
            <el-table-column prop="temperature" label="体温℃" width="90" />
            <el-table-column prop="heartRate" label="心率次/分" width="100" />
            <el-table-column prop="breathe" label="呼吸次/分" width="100" />
              <el-table-column prop="rate" label="脉率" width="100" />
                 <el-table-column prop="officeCode" label="科室" width="100" />
                <el-table-column prop="maxBP" label="血压高" width="100" />
                  <el-table-column prop="bedCode" label="床位" width="100" />
                  <el-table-column prop="minBP" label="血压低" width="100" />
            <el-table-column prop="oximetry" label="血氧饱和度%" width="110" />
            <el-table-column prop="measures" label="护理措施及效果" min-width="220" />
            <el-table-column label="护士签名" width="90">
                <template #default="scope">
                    <img v-if="scope.row.signUrl" :src="scope.row.signUrl" class="sign-img" />
                </template>
            </el-table-column>
        </el-table>
        <el-empty v-else description="暂无护理记录" />

    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import http from '@/api/http.js'
const route = useRoute()

import { useRouter, useRoute } from 'vue-router'


const ruleForm = reactive<any>({
    id: route.query.id,
    patientCode: route.query.patientCode,
    name: route.query.name,
    bedCode: route.query.bedCode,
    sex: route.query.sex,
    department: route.query.department,
    doctor: route.query.doctor,
    nurse: route.query.nurse,
    diagnosis: route.query.diagnosis,
    treatment: route.query.treatment,
    nurseCare: route.query.nurseCare,
})
const router = useRouter()
const printTable = () => {
 http.get('/api/PatientReCordController/ShowPatientReCord').then(res => {
    if (res) {
        records.value = res
    } else {
        ElMessage.warning('未找到护理记录');
    }
 })
}
//获取护理列表
onMounted(() => {
    printTable()
})
const loading = ref(false)
// 使用reactive而不是ref，方便直接访问属性
const patientInfo = reactive({
    name: '',
    age: '',
    sex: '',
    officeCode: '',
    bedCode: '',
    wardCode: '',
    diagnosis: '',
    department: '',
    patientCode: '',
    inDate: ''
})

const records = ref([])
 


onMounted(() => {
    // 从路由参数获取患者信息
    const patientCode = route.query.patientCode as string;
    // 直接从路由参数填充患者信息
    patientInfo.name = route.query.name as string || '';
    patientInfo.sex = route.query.sex as string || '';
    patientInfo.age = route.query.age as string || '';
    patientInfo.officeCode = route.query.officeCode as string || '';
    patientInfo.bedCode = route.query.bedCode as string || '';
    patientInfo.wardCode = route.query.wardCode as string || '';
    patientInfo.diagnosis = route.query.diagnosis as string || '';
    patientInfo.patientCode = patientCode || '';
    patientInfo.inDate = route.query.inDate as string || '';
    if (patientCode) {
        loading.value = true;
        // 获取患者详细信息
        http.get(`/api/PatientReCordController/GetPatientInfo?PatientCode=${patientCode}`).then(res => {

            if (res) {
                // 使用Object.assign更新属性
                Object.assign(ruleForm, res);

            } else {
                ElMessage.warning('未找到患者信息');
            }
        }).catch(err => {
            console.error('获取患者信息失败:', err);
            ElMessage.error('获取患者信息失败');
        }).finally(() => {
            loading.value = false;
        });
    }

    
})



</script>

<style scoped>
.record-page {
    padding: 20px;
}

.filter-bar {
    margin-bottom: 10px;
}

.action-bar {
    margin-bottom: 20px;
    display: flex;
}

.patient-info {
    margin-bottom: 10px;
    font-weight: bold;
    background-color: #f5f7fa;
    padding: 15px;
    border-radius: 4px;
}

.sign-img {
    height: 32px;
    max-width: 80px;
    object-fit: contain;
    border: 1px solid #eee;
    background: #fff;
    padding: 2px;
    border-radius: 2px;
}

.pagination {
    margin-top: 20px;
    text-align: center;
}

@media print {

    .filter-bar,
    .el-button,
    .pagination,
    .action-bar {
        display: none !important;
    }

    .record-page {
        padding: 0;
    }
}
</style>
